<template>
  <div class="app-container">
    <el-row>
      <!-- 搜索区域 -->
      <el-card style="margin:0 0 5px 5px">
        <div slot="header" class="clearfix">
          <label style="font-size: 26px;">感谢捐赠，请填写并核对订单信息</label>
        </div>
        <el-row :gutter="20">
          <el-table
            ref="attrTable"
            v-loading="tableLoading"
            row-key="id"
            :data="order.carts"
            element-loading-text="加载中"
            border
            fit
            highlight-current-row
            show-overflow-tooltip
            default-expand-all
          >
            <el-table-column type="expand">
              <template slot-scope="scope">
                <el-row v-for="(item, index) in scope.row.saleAttrValues" :key="'attr_'+index" type="flex" justify="center">
                  <span style="margin-right: 40px;">{{ item.attrName }}:</span>
                  <span>{{ item.attrValue }}</span>
                </el-row>
              </template>
            </el-table-column>
            <el-table-column align="left" label="品牌" width="120">
              <template slot-scope="scope">
                <el-avatar shape="square" fit="fill" :src="getImageSrc(scope.row.image)" />
              </template>
            </el-table-column>
            <el-table-column align="center" label="商品" prop="title">
              <template slot-scope="scope">
                <label>{{ scope.row.title }}</label>
              </template>
            </el-table-column>
            <el-table-column align="left" label="价格" prop="price" width="65" />
            <el-table-column align="left" label="数量" prop="count" width="65" />
          </el-table>
        </el-row>
        <el-row :gutter="20" class="m-t-20" type="flex" align="middle">
          <el-col :span="1.5">
            <label>请输入捐赠金额(元)</label>
          </el-col>
          <el-col :span="1.5">
            <el-input-number v-model.number="order.payPrice" :min="0" :precision="2" :step="1" />
          </el-col>
        </el-row>
        <el-row :gutter="20" class="m-t-20" type="flex" align="middle">
          <el-col :span="1.5">
            <label>请选择支付方式并支付</label>
          </el-col>
          <el-col :span="1.5">
            <el-radio-group v-model="order.payChannel" size="mini" @change="changePayChannel">
              <el-radio
                v-for="channel in payChannels"
                :key="'channel_' + channel.channelId"
                :label="channel.channelId"
              >
                <el-avatar shape="square" fit="fill" :src="getImageSrc(channel.icon)" />
              </el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="m-t-20" type="flex" justify="center">
          <el-button v-if="hasLoaded" type="primary" icon="el-icon-check" @click="onSubmit">去 支 付</el-button>
        </el-row>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import { paymentChannelList } from '@/api/mall/payment/channel'
import { orderDonate, orderSubmit } from '@/api/mall/order/order'

export default {
  data() {
    return {
      hasLoaded: false,
      order: {
        addressId: undefined,
        addressName: undefined,
        payChannel: undefined,
        channelCode: undefined,
        token: undefined,
        payPrice: 0,
        subject: undefined,
        body: undefined,
        carts: [],
        remarks: undefined
      },
      payChannels: [],
      tableLoading: false
    }
  },
  mounted() {
    this.handlePayChannel()
    this.init()
  },
  methods: {
    init() {
      this.hasLoaded = false
      this.tableLoading = true
      orderDonate().then(response => {
        this.order = this.$api.objectUpdate(this.order, response.param)
        this.hasLoaded = true
        this.tableLoading = false
      }).catch(e => {
        this.tableLoading = false
      })
    },
    getImageSrc(value) {
      return this.$api.getImageSrc(value)
    },
    handlePayChannel() {
      this.payChannels = []
      paymentChannelList( { status: 0 }).then(response => {
        response.forEach((channel) => {
          // 构造saleAttr信息
          this.payChannels.push({
            channelId: channel.channelId,
            channelCode: channel.channelCode,
            icon: channel.icon
          })
        })
        this.order.payChannel = this.payChannels[0].channelId
        this.order.channelCode = this.payChannels[0].channelCode
      })
    },
    changePayChannel() {
      this.payChannels.forEach(channel => {
        if (channel.channelId === this.order.payChannel) {
          this.order.channelCode = channel.channelCode
        }
      })
    },
    onSubmit() {
      if (!this.order.payChannel || !this.order.channelCode) {
        this.$modal.msgWarning('请选择支付方式')
        return
      }

      if (this.order.payPrice <= 0) {
        this.$modal.msgWarning('请输入捐赠金额')
        return
      }

      orderSubmit(this.order).then(response => {
        let div = document.createElement('div')
        div.innerHTML = response.param.body
        div.setAttribute('id', 'payDiv')
        div.setAttribute('style', 'display:none;')
        document.body.appendChild(div)
        document.querySelector("#payDiv>form").target = '_blank'
        document.querySelector("#payDiv>form").submit()
        div.parentNode.removeChild(div)
        setTimeout(() => {
          this.$router.push('/mall/order/manage?userId=' + this.$store.getters.user.userId)
        }, 3000)
      }).catch(() => {})
    }
  }
}
</script>
